<template>
	<view class="verify-page">
		<view class="banner">
			<text class="banner-title">真实婚恋 拒绝虚假</text>
			<text class="banner-subtitle">认证多一点，缘分近一点</text>
		</view>
		
		<!-- 认证列表 -->
		<view class="verify-list">
			<!-- 实名认证 -->
			<view class="verify-item">
				<view class="verify-icon">
					<image src="/static/icons/verify-id.png" mode="aspectFit"></image>
				</view>
				<view class="verify-content">
					<text class="verify-title">实名认证</text>
				</view>
				<view class="verify-status" @click="handleIdVerify">
					<text class="status-text" :class="{ 'failed': idVerifyStatus === 'failed', 'success': idVerifyStatus === 'success' }">
						{{ getStatusText(idVerifyStatus) }}
					</text>
					<image class="arrow-icon" src="/static/icons/arrow-right.png" mode="aspectFit"></image>
				</view>
			</view>
			
			<!-- 单身承诺 -->
			<view class="verify-item">
				<view class="verify-icon">
					<image src="/static/icons/verify-single.png" mode="aspectFit"></image>
				</view>
				<view class="verify-content">
					<text class="verify-title">单身承诺</text>
				</view>
				<view class="verify-status" @click="handleSingleVerify">
					<text class="status-text" :class="{ 'pending': singleVerifyStatus === 'pending', 'success': singleVerifyStatus === 'success' }">
						{{ getStatusText(singleVerifyStatus) }}
					</text>
					<image class="arrow-icon" src="/static/icons/arrow-right.png" mode="aspectFit"></image>
				</view>
			</view>
			
			<!-- 学历认证 -->
			<view class="verify-item">
				<view class="verify-icon">
					<image src="/static/icons/verify-edu.png" mode="aspectFit"></image>
				</view>
				<view class="verify-content">
					<text class="verify-title">学历认证</text>
				</view>
				<view class="verify-status" @click="handleEduVerify">
					<text class="status-text" :class="{ 'pending': eduVerifyStatus === 'pending' }">
						{{ getStatusText(eduVerifyStatus) }}
					</text>
					<image class="arrow-icon" src="/static/icons/arrow-right.png" mode="aspectFit"></image>
				</view>
			</view>
			
			<!-- 房产认证 -->
			<view class="verify-item">
				<view class="verify-icon">
					<image src="/static/icons/verify-house.png" mode="aspectFit"></image>
				</view>
				<view class="verify-content">
					<text class="verify-title">房产认证</text>
				</view>
				<view class="verify-status" @click="handleHouseVerify">
					<text class="status-text" :class="{ 'pending': houseVerifyStatus === 'pending' }">
						{{ getStatusText(houseVerifyStatus) }}
					</text>
					<image class="arrow-icon" src="/static/icons/arrow-right.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getVerificationStatusApi } from '@/api/index.js';
	import { mapState } from 'vuex';
	
	export default {
		data() {
			return {
				idVerifyStatus: 'failed', // pending, success, failed
				singleVerifyStatus: 'pending', // pending, success
				eduVerifyStatus: 'pending', // pending, success
				houseVerifyStatus: 'pending' // pending, success
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad() {
			this.getVerificationStatus();
		},
		methods: {
			// 获取认证状态
			getVerificationStatus() {
				if (!this.userInfo || !this.userInfo.id) {
					this.$hr.methods.toast('请先登录');
					setTimeout(() => {
						this.$hr.methods.goPage('/login/index');
					}, 1500);
					return;
				}
				
				this.$hr.methods.loading();
				getVerificationStatusApi().then(res => {
					this.$hr.methods.hideloading();
					if (res) {
						this.idVerifyStatus = res.id_verify_status || 'pending';
						this.singleVerifyStatus = res.single_verify_status || 'pending';
						this.eduVerifyStatus = res.edu_verify_status || 'pending';
						this.houseVerifyStatus = res.house_verify_status || 'pending';
					}
				}).catch(() => {
					this.$hr.methods.hideloading();
					this.$hr.methods.toast('获取认证状态失败');
				});
			},
			
			// 获取状态文本
			getStatusText(status) {
				switch (status) {
					case 'pending':
						return '待签署';
					case 'success':
						return '已认证';
					case 'failed':
						return '认证失败';
					default:
						return '未认证';
				}
			},
			
			// 处理实名认证
			handleIdVerify() {
				this.$hr.methods.goPage('/mine/verify/id/index');
			},
			
			// 处理单身承诺
			handleSingleVerify() {
				this.$hr.methods.goPage('/mine/promise/index');
			},
			
			// 处理学历认证
			handleEduVerify() {
				this.$hr.methods.goPage('/mine/verify/edu/index');
			},
			
			// 处理房产认证
			handleHouseVerify() {
				this.$hr.methods.goPage('/mine/verify/house/index');
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style> 